<template>
  <div>
    <!--注册卡片-->
    <transition name="fade" appear>
      <el-card class="box-card">
        <el-form
          :model="examineeRegis"
          class="regis elmt-10"
          :rules="rulesRegis"
          ref="examineeRegis"
        >
          <el-form-item label="学号" prop="schoolNum">
            <el-input
              placeholder="请输入学号"
              v-model="examineeRegis.schoolNum"
              prefix-icon="el-icon-user-solid"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input
              placeholder="请输入姓名"
              v-model="examineeRegis.name"
              prefix-icon="el-icon-user-solid"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              placeholder="请输入密码"
              v-model="examineeRegis.password"
              prefix-icon="el-icon-lock"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkpassword">
            <el-input
              placeholder="与上一个密码相同"
              v-model="examineeRegis.checkpassword"
              prefix-icon="el-icon-lock"
              class="elmb-10"
              show-password
            ></el-input>
          </el-form-item>
          <el-button type="success" class="elmt-10" @click="register('examineeRegis')">立即注册</el-button>
          <el-link type="primary" @click="toggleCard" class="elva-bt">去登录</el-link>
        </el-form>
      </el-card>
    </transition>
  </div>
</template>
<script>
export default {
  name: "register",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.examineeRegis.checkpassword !== "") {
          this.$refs.examineeRegis.validateField("checkpass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.examineeRegis.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validateSchoolNum = (rule, value, callback) => {
      if (!/^[0-9]+$/.test(value)) {
        callback(new Error("学号必须为数字"));
      } else {
        callback();
      }
    };
    return {
      remember: false, // 考生按钮状态-记住我
      isShow: true, // 卡片切换，一个是登录/一个是注册
      examineeRegis: {
        schoolNum: "", // 考生注册学号
        name: "", // 考生注册姓名
        password: "", // 考生注册密码
        checkpassword: "" //确认密码
      },
      rulesRegis: {
        //验证注册规则
        schoolNum: [
          //验证学号
          { required: true, message: "请输入学号", trigger: "blur" },
          { validator: validateSchoolNum, trigger: "change" },
          { min: 6, max: 12, message: "长度在 6 到 12 个字符", trigger: "blur" }
        ],
        name: { required: true, message: "请输入姓名", trigger: "blur" }, //验证名字
        password:  { validator: validatePass, trigger: "blur" }, //验证密码
        checkpassword: { validator: validatePass2, trigger: "blur" } //验证确认密码
      }
    };
  },
  methods: {
    toggleCard() {
      // this.isShow = !this.isShow; // 卡片切换
      this.$emit("toggle");
    },
    // 立即注册
    register(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let info = this.examineeRegis;
          delete info.checkpassword;
          this.axios.post("/api/register", info).then(res => {
            if (res.data) {
              this.$message.success("注册成功!");
              this.toggleCard(); //注册成功就跳转登录
            } else {
              this.$message.error("用户名已存在!");
            }
          });
        }
      });
    }
  }
};
</script>
<style  scoped>
.box-card {
  width: 320px;
  height: 350px;
  position: absolute;
  right: 80px;
}
/*vue组件过渡动画*/
.fade-enter-active {
  -webkit-animation: bounceIn 1s 0.2s ease both;
}
/*自定义动画*/
@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }
  70% {
    -webkit-transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
</style>
<style>
.el-form-item {
  display: flex;
  flex-direction: row;
}
.el-form-item__label {
  width: 80px;
}
</style>